<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 

   <div>
     <h3>Boundary positions</h3>
     <p> {{ pos_str }}</p>
   </div>
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng({{lat}}, {{lng}}),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         var bounds = map.getBounds();
		 //alert('North East '+bounds.getNorthEast());
		 //alert('South West '+bounds.getSouthWest());
      });
   </script> 
</body> 
</html>